<template>
    <a-card :bordered="false">
        <a-col :span="18">
            <a-spin tip="Loading..." :spinning="spinning">
                <div>
                    <a-row>
                        <a-col :span="18">
                            <p>
                                <a-divider orientation="left">组一</a-divider>
                            </p>
                        </a-col>
                        <a-col :span="6"></a-col>
                        <!-- 预览区域 -->
                        <a-col :span="12">
                            <template>
                                <div v-for="(fileDetail,index) in dataSource[0].fileDetails" :key="index">
                                    <div style="float: left;width:104px;height:104px;margin-right: 10px;margin: 0 8px 8px 0;">
                                        <div
                                                style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
                                            <img style="width: 100%;" :src="fileDetail.imgUrl" :preview="dataSource[0].key">
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </a-col>
                    </a-row>
                </div>
                <div>
                    <a-row>
                        <a-col :span="18">
                            <p>
                                <a-divider orientation="left">组二</a-divider>
                            </p>
                        </a-col>
                        <a-col :span="6"></a-col>
                        <!-- 预览区域 -->
                        <a-col :span="12">
                            <template>
                                <div v-for="(fileDetail,index) in dataSource[1].fileDetails" :key="index">
                                    <div style="float: left;width:104px;height:104px;margin-right: 10px;margin: 0 8px 8px 0;">
                                        <div
                                                style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
                                            <img style="width: 100%;" :src="fileDetail.imgUrl"  :preview="dataSource[1].key">
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </a-col>
                    </a-row>
                </div>
            </a-spin>
            <p></p>
        </a-col>
    </a-card>
</template>

<script>

import ARow from 'ant-design-vue/es/grid/Row'

export default {
  name: 'ImagPreview',
  components: {
    ARow
  },
  data() {
    return {
      description: '图片预览页面',
      spinning: false,
      //数据集
      dataSource: [{
        key: 0,
        fileDetails: [
          {
            imgUrl: "https://static.jeecg.com/upload/test/3a4490d5d1cd495b826e528537a47cc1.jpg"
          },
          {
            imgUrl: "https://static.jeecg.com/upload/test/8f22cd945be44388bacbf0b88cf86cfa.png"
          }
        ]
      }, {
        key: 1,
        fileDetails: [
          {
            imgUrl: "https://static.jeecg.com/upload/test/u27356337152749454924fm27gp0_1588149731821.jpg"
          },
          {
            imgUrl: "https://static.jeecg.com/upload/test/1_1588149743473.jpg"
          }
        ]
      }
      ],
      url: {
      }
    }
  },
  created() {
  },
  methods: {
  }
}
</script>
<style scoped>
    .table-operator {
        margin-bottom: 10px
    }

    .clName .ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle {
        width: 10px !important;
    }

    .clName .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
        background-color: #1890FF !important;
    }
</style>
